<template>
    <div>
      <van-row>
        <van-col id="location" style="position: relative; " span="24">
          <van-icon id="locationIcon" name="location" />
          <p style="font-size: 16px;">
            厦门工学院
          </p>
        </van-col>

        <van-col v-for="item in list" class="featrue"  span="24">
            <div :style="{'background' : item.color}">
                <p>{{item.desc}}</p>
            </div>
        </van-col>
      </van-row>
<!--      <el-amap vid="amap" zoom="15"  class="amap-demo"></el-amap>-->

    </div>
</template>

<script>
export default {
  name: "Home",
  data(){
    return{
        list:[
          {desc:"物业费",color:"#1E90FF"},
          {desc:"水电费",color:"#2ED573"},
          {desc:"报修",color:"#FFA94D"},
          {desc:"其他费用",color:"#FF7F50"},
        ]

    }
  },components:{
  }

}
</script>

<style scoped>
   #location{
      height: 53px;
   }
   #locationIcon{
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     left: 33px;
   }
   #location p{
      margin-left: 7vh;
   }
   .featrue{
     /*margin-top: -15px;*/
     /*height: 100px;*/
   }
   .featrue div p{
     font-size: 28px;
     color: white;
     text-align: center;
     line-height: 100px;
   }
   .featrue div{
     width: 90%;
     height: 100%;
     margin: 0 auto;
   }

</style>